<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  img {
    max-width: 640px;
    transition: 1s filter, 1s -webkit-filter;
    /*-webkit-filter: sepia() saturate(4) hue-rotate(295deg);*/
    filter: sepia() saturate(4) hue-rotate(295deg);
  }

  img:hover,
  img:focus {
    -webkit-filter: none;
    filter: none;
  }

  /*要对一个元素设置混合模式，有两个属性可以派上用场：mix-blendmode
可以为整个元素设置混合模式，background-blend-mode 可以为每层
背景单独指定混合模式。这意味着，如果用这个方案来处理图片，我们实际
上有两种选择。不过这两者各有所短。
 第一种选择：需要把图片包裹在一个容器中，并把容器的背景色设
置为我们想要的主色调。
 第二种选择：不用图片元素，而是用 <div> 元素——把这个元素的
第一层背景设置为要染色的图片，并把第二层的背景设置为我们想
要的主色调。*/
</style>
<body>
  <img src="../adam-catlace.png" alt="">


</body>
</html>